import React from 'react';
import {WeaDialog,WeaTab} from 'ecCom';
import {Button,Popover,Menu} from 'antd';
import { inject, observer } from 'mobx-react';
import {Condition, getAdButtons} from '../list/ListCondition';
import {WeaTableNew} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
const Item = Menu.Item;

@inject ('wfCustomLogStore')

@observer

export default class Main extends React.Component{
    constructor(props){
        super(props);
    }

    saveDate () {
        console.log('save');
    }

    more () {
        console.log('more');
    }

    handleCancel () {
        const {wfCustomLogStore} = this.props;
        wfCustomLogStore.toogleLogModal(false);

    }
    getTabButtonsAd() {
        return [
            (<Button type="primary" onClick={()=>{console.log('搜索')}}>搜索</Button>),
            (<Button type="primary" onClick={()=>{console.log('重置')}}>重置</Button>),
            (<Button type="ghost" onClick={()=>{console.log('取消')}}>取消</Button>)
        ]
    }
    dropMenuDatas () {
        let btns = [];
        btns.push(
            {
                key: "1",
                icon : <i className="icon-coms-New-Flow"></i>,
                content : '导出EXCEL',
                onClick: key =>{
                    console.log('aaa');
                }
            },{
                key: "2",
                icon : <i className="icon-coms-Custom"></i>,
                content : '收藏',
                onClick: key =>{
                    console.log('bbb');
                }
            },{
                key: "3",
                icon : <i className="icon-coms-Custom"></i>,
                content : '帮助',
                onClick: key =>{
                    console.log('ccc');
                }
            }
        );

        const menu =  <Menu mode='vertical' onClick={o => {
                // if (typeof this.props.onDropMenuClick === 'function') this.props.onDropMenuClick(o.key);
                btns.forEach(d => {
                    if (d.key === o.key && typeof d.onClick === 'function') d.onClick(o.key);
                });
            }}
            >
                {
                    btns.map((d, i) => {
                        return (
                            <Item key={d.key || i} disabled={d.disabled}>
                                <span className='wea-right-menu-icon'>{d.icon}</span>
                                {d.content}
                            </Item>
                        );
                    })
                }
            </Menu>;
        const a = (
            <div className='wea-new-top-drop-menu wea-right-menu'
                 onMouseLeave={() => this.setState({ showDrop: false })}
                 style={{ display:'block'  }}
            >
                {menu}
            </div>
        );
        return a;
    }

    logModalCancel = () => this.props.wfCustomLogStore.toogleLogModal(false) 
    render () {
        const {wfCustomLogStore} = this.props;
        const {logModalVisible,tableStore,showSearchAd} = wfCustomLogStore;

        const footer = [
            <Button key="save" type="primary" size="large" onClick={() => this.saveDate()}>导出EXCEL</Button>,
            <Popover overlayClassName="wf-popover" placement="topRight" content={this.dropMenuDatas()} trigger="click">
                <Button key="back" type="ghost" size="large" >更多>></Button>
            </Popover>
            // <Button key="back" type="ghost" size="large" onClick={() => this.more()}>更多>></Button>
        ];
        return (
            <div>
                <WeaDialog
                    className="wf-logModal"
                    title={'日志查看'}
                    visible={logModalVisible}
                    icon={"icon-coms-workflow"}
                    iconBgcolor="#0079DE"
                    maskClosable={false}
                    buttons={footer}
                    onCancel={this.logModalCancel}
                    style={{width: '974px', height: '490px'}}
                >
                    <WeaTab
                        datas={[{
                            title : '',
                            viewcondition : 0
                        }]}
                        hasMask={false}
                        searchType={['advanced']}
                        showSearchAd={showSearchAd}
                        setShowSearchAd={bool=>{
                            wfCustomLogStore.setShowSearchAd(bool)
                        }}
                        buttonsAd={getAdButtons(wfCustomLogStore)}
                        searchsAd={<Condition listStore={wfCustomLogStore}/>}
                        keyParam="viewcondition"  //主键
                        // countParam="groupid" //数量
                        // onChange={this.changeData.bind(this)}
                    />
                    <WeaTable
                        comsWeaTableStore={tableStore}
                        hasOrder={true}
                        needScroll={true}
                    />

                </WeaDialog>
            </div>
        )
    }
}